<template>
  <div class="container">

    <!-- 搜索区域 -->
    <el-row>
      <el-form :inline="true">
        <el-form-item label="咨询ID">
          <el-input v-model="queryInfo.id" placeholder="请输入咨询ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="appointmentList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="120px"></el-table-column>
      <el-table-column prop="specialty.name" label="擅长类型">
      </el-table-column>
      <el-table-column prop="consult.name" label="咨询师" width="140px">
      </el-table-column>
      <el-table-column prop="user.username" label="用户" width="140px">
      </el-table-column>
      <el-table-column prop="content" label="内容">
      </el-table-column>
      <el-table-column prop="reply" label="回复">
        <template slot-scope="scope">
          <div v-if="scope.row.reply">{{scope.row.reply}}</div>
          <el-button v-if="!scope.row.reply&&scope.row.status===1" @click="remark(scope.row)">去回复</el-button>
          <div v-if="!scope.row.reply&&scope.row.status===0"style="color: red">请完成后再回复</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status===0" @click="changeStatus(scope.row)" type="danger">未完成</el-button>
          <el-button v-if="scope.row.status===1" @click="changeStatus(scope.row)" type="warning">已完成</el-button>
          <el-button v-if="scope.row.status===2" @click="changeStatus(scope.row)" type="success">已回复</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope='scope'>
          <el-link type="primary" @click="toDeleteAppointment(scope.row.id)">删除预约</el-link>
          <el-link type="primary" @click="toEditReply(scope.row)">修改回复</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="queryInfo.pageNum" :page-sizes="[4, 6, 8, 10]" :page-size="queryInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- Form -->
    <el-dialog title="回复内容" :visible.sync="dialogFormVisible" @close="cancel">
      <el-form :model="appointment">
        <el-form-item >
          <!-- 富文本编辑器组件 -->
          <quill-editor v-model="appointment.reply"></quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="toSubmit">确 定</el-button>
      </div>
    </el-dialog>
<!--    第二个dialog-->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
      <span>是否改为未完成状态？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeStatus2">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 下拉框
      value: '',
      dialogImageUrl: '', // 预览图片路径
      dialogVisible: false, // 预览图片的对话框
      // 查询信息对象
      queryInfo: {
        id: ''
      },
      total: 0,
      appointmentList: [],
      title: '添加', // 对话框标题
      dialogFormVisible: false, // 是否显示对话框
      appointment: {
        // 文章对象
        "id": '',
        "consultId": 1,
        "userId": 1,
        "typeId": 1,
        "reply": '',
        "status": 0,
        "specialty": {
          "id": '',
          "name": ''
        },
        "user": {
          "id": '',
          "username": ''
        },
        "consult": {
          "id": '',
          "name": ''
        }
      },
      fileList: [],
      appointmentTypeList: []
    }
  },
  methods: {
    //userId
    //typeId
    //consultId
    //状态改变2
    changeStatus2() {
      this.appointment.reply = ''
      this.$http.post("appointment/updateReply", this.appointment)
          .then(resp => {
            if (resp.data.status === 200) {
              // 清空数据
              this.appointment.status = 0
              // 重新查询
              this.$http.post("appointment/updateStatus", this.appointment)
                  .then(resp =>{
                    if (resp.data.status === 200) {
                      this.$message.success('修改成功！');
                      this.dialogVisible = false
                      // 清空数据
                      this.appointment = {
                        // 文章对象
                        "id": '',
                        "consultId": 1,
                        "userId": 1,
                        "typeId": 1,
                        "reply": '',
                        "status": 0,
                        "specialty": {
                          "id": '',
                          "name": ''
                        },
                        "user": {
                          "id": '',
                          "username": ''
                        },
                        "consult": {
                          "id": '',
                          "name": ''
                        }
                      }
                      // 关闭对话框
                      this.dialogFormVisible = false;
                      this.queryList();
                    }else {
                      this.$message.error('status接口异常！')
                    }
                  })
            } else {
              this.$message.error('reply接口异常！')
            }
          })
    },
    //提交
    toSubmit(){
      this.$http.post("appointment/updateReply", this.appointment)
          .then(resp => {
            if (resp.data.status === 200) {
              // 清空数据
              this.appointment.reply=''
              this.appointment.status=2
              // 重新查询
              this.$http.post("appointment/updateStatus", this.appointment)
                  .then(resp =>{
                    if (resp.data.status === 200) {
                      this.$message.success('回复成功！');
                      // 清空数据
                      this.appointment = {
                        // 文章对象
                        "id": '',
                        "consultId": 1,
                        "userId": 1,
                        "typeId": 1,
                        "reply": '',
                        "status": 0,
                        "specialty": {
                          "id": '',
                          "name": ''
                        },
                        "user": {
                          "id": '',
                          "username": ''
                        },
                        "consult": {
                          "id": '',
                          "name": ''
                        }
                      }
                      // 关闭对话框
                      this.dialogFormVisible = false;
                      this.queryList();
                    }else {
                      this.$message.error('status接口异常！')
                    }
                  })
            } else {
              this.$message.error('reply接口异常！')
            }
          })
    },
    //取消
    cancel(){
      this.dialogFormVisible = false;
      this.appointment={
        // 文章对象
        "id": '',
            "consultId": 1,
            "userId": 1,
            "typeId": 1,
            "reply": '',
            "status": 0,
            "specialty": {
          "id": '',
              "name": ''
        },
        "user": {
          "id": '',
              "username": ''
        },
        "consult": {
          "id": '',
              "name": ''
        }
      }
    },
    //未回复去回复
    remark(e){
      this.dialogFormVisible=true
      this.appointment.id = e.id
    },
    //修改回复
    toEditReply(e){
      if(e.reply){
        this.dialogFormVisible = true
        this.appointment.reply = e.reply
        this.appointment.id = e.id
      }
      else {
        this.$message.error('您还没有回复！请回复后尝试')
      }
    },
    //改变按钮完成状态
    changeStatus(e) {
      if (e.status === 0) {
        this.appointment.status = 1
      } else if (e.status === 1) {
        this.appointment.status = 0
      } else if (e.status === 2){
        this.appointment.id = e.id
        this.dialogVisible = true
        return
      }
      this.appointment.id = e.id
      console.log(this.appointment)
      this.$http.post("appointment/updateStatus", this.appointment)
          .then(resp => {
            if (resp.data.status === 200) {
              // 消息提示
              this.$message.success('修改成功！');
              // 清空数据
              this.appointment = {
                // 文章对象
                "id": '',
                "consultId": 1,
                "userId": 1,
                "typeId": 1,
                "reply": '',
                "status": 0,
                "specialty": {
                  "id": '',
                  "name": ''
                },
                "user": {
                  "id": '',
                  "username": ''
                },
                "consult": {
                  "id": '',
                  "name": ''
                }
              }
              this.fileList = []
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.queryList()
            } else {
              this.$message.error('接口异常！')
            }
          })
    },
    //查询typeId
    // queryAppointmentType(){
    //   // 调用后端接口来获取数据
    //   this.$http.get('specialty/selectAll')
    //       .then(resp => {
    //         if (resp.data.status == 200) {
    //           console.log(resp.data)
    //           this.appointmentTypeList = resp.data.data.list;
    //           this.total = resp.data.data.total;
    //           console.log(this.appointmentTypeList)
    //         } else {
    //           this.$message.error('查询失败！')
    //         }
    //       })
    // },
    // 处理上传成功的函数
    handleSuccess(response) {
      // 把上传后的图片路径，交给文章对象的tabularChart
      this.appointment.tabularchart = response.message;
      console.log(this.appointment.tabularchart);
    },

    // 删除图片的事件
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //  在取消函数，添加成功， 修改成功的函数中加入以下代码实现图片的清空
      this.fileList = []
      // 移除数据
      this.appointment.tabularChart = '';
    },
    // 预览图片事件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 添加文章
    addAppointment() {
      this.$http.post("appointment/insert", this.appointment)
          .then(resp => {
            if (resp.data.status === 200) {
              // 消息提示
              this.$message.success('添加成功！');
              // 清空数据
              this.appointment = {
                // 文章对象
                "id": '',
                "consultId": 1,
                "userId": 1,
                "typeId": 1,
                "reply": '',
                "status": 0,
                "specialty": {
                  "id": '',
                  "name": ''
                },
                "user": {
                  "id": '',
                  "username": ''
                },
                "consult": {
                  "id": '',
                  "name": ''
                }
              }
              this.fileList = []
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.queryList()
            } else {
              this.$message.error('接口异常！')
            }
          })
    },
    //删除
    toDeleteAppointment(id) {
      this.appointment.id = id;
      // 调用后端接口来获取数据
      this.$http.post('appointment/delete', this.appointment
      )
          .then(resp => {
            if (resp.data.status === 200) {
              this.$message.success('删除成功！')
              this.fileList = []
              this.appointment.id = '';
              this.queryList();
            } else {
              this.$message.error('删除失败！')
              this.fileList = []
              this.appointment.id = '';
            }
          })
    },
    /// 取消对话框
    cancle() {
      this.dialogFormVisible = false;
      this.appointment = {
        // 文章对象
        "id": '',
        "consultId": 1,
        "userId": 1,
        "typeId": 1,
        "reply": '',
        "status": 0,
        "specialty": {
          "id": '',
          "name": ''
        },
        "user": {
          "id": '',
          "username": ''
        },
        "consult": {
          "id": '',
          "name": ''
        }
      }
      this.fileList = []
    },
    //搜索
    search() {
      this.$http.get('appointment/selectById', {params: this.queryInfo})
          .then(resp => {
            console.log(resp)
            if (resp.data.status === 200) {
              console.log(resp.data)
              this.appointmentList = [];
              this.appointmentList[0] = resp.data.data;
              console.log(this.appointmentList)
            } else {
              this.$message.error('暂无数据！')
            }
          })
    },
    // 进入添加的对话框
    toAddAppointment() {
      this.title = "新增文章";
      this.dialogFormVisible = true;
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      console.log("size" + size)

      this.queryList();
    },
    handleCurrentChange(num) {
      this.queryInfo.pageNum = num;
      console.log('num:' + num)

      this.queryList();
    },
    // 分页查询信息的方法
    queryList() {
      console.log(this.queryInfo);
      // 调用后端接口来获取数据
      this.$http.get('appointment/selectAll', {
        params: this.queryInfo
      })
          .then(resp => {
            if (resp.data.status === 200) {
              console.log(resp.data)
              this.appointmentList = resp.data.data.list;
              this.total = resp.data.data.total;
              console.log(this.appointmentList)
            } else {
              this.$message.error('查询失败！')
            }
          })
    }
  },
  mounted() {
    this.queryList();
  }
}
</script>
<style>
/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
  min-height: 200px;
}

.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}

.el-pagination {
  margin-top: 15px;
}

.el-link {
  padding: 0 5px;
}
</style>